<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="位置信息" name="locationInfoTab">
          <div class="locationInfoTabStyle">
            <div style="flex-grow:1">
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    icon="el-icon-refresh"
                    size="mini"
                    @click="getBoatLocationInfoList"
                  >刷新
                  </el-button>
                </el-col>
              </el-row>
            </div>

            <div style="flex-grow:10">
              <el-table v-loading="loading" :data="boatLocationInfoList" @selection-change="handleSelectionChange"
                        max-height="680">
                <!--            <el-table-column type="selection" width="55" align="center" />-->
                <!--            <el-table-column label="ID" align="center" prop="id" />-->
                <el-table-column label="序号" type="index" align="center" width="48" fixed="left"/>
                <el-table-column label="终端ID" align="center" prop="meterId"/>
                <el-table-column label="定位状态" align="center" prop="locationStatus"
                                 :formatter="locationStatusFormatter"
                                 width="75"
                />
                <!--            <el-table-column label="经度方位" align="center" prop="longitudeOri" :formatter="longitudeOriFormatter"/>-->
                <!--            <el-table-column label="纬度方位" align="center" prop="latitudeOri" :formatter="latitudeOriFormatter"/>-->
                <el-table-column label="纬度" align="center" prop="latitude"/>
                <el-table-column label="经度" align="center" prop="longitude"/>
                <el-table-column label="高程(米)" align="center" prop="elevation"/>
                <el-table-column label="速度(km/h)" align="center" prop="speed"/>
                <el-table-column label="方向(°)" align="center" prop="orientation"/>
                <el-table-column label="当前卫星个数" align="center" prop="satellitesNum"/>
                <el-table-column label="水平分量精度因子" align="center" prop="hdop"/>
                <el-table-column label="GSM信号强度" align="center" prop="csq"/>
                <el-table-column label="生成时间" align="center" prop="createTime" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
                <!--              <template slot-scope="scope">-->
                <!--                <el-button-->
                <!--                  size="mini"-->
                <!--                  type="text"-->
                <!--                  icon="el-icon-edit"-->
                <!--                  @click="handleUpdate(scope.row)"-->
                <!--                  v-hasPermi="['system:info:edit']"-->
                <!--                >修改</el-button>-->
                <!--                <el-button-->
                <!--                  size="mini"-->
                <!--                  type="text"-->
                <!--                  icon="el-icon-delete"-->
                <!--                  @click="handleDelete(scope.row)"-->
                <!--                  v-hasPermi="['system:info:remove']"-->
                <!--                >删除</el-button>-->
                <!--              </template>-->
                <!--            </el-table-column>-->
              </el-table>
            </div>

            <div style="flex-grow:1">
              <pagination
                v-show="boatLocationInfoTotal>0"
                :total="boatLocationInfoTotal"
                :page.sync="boatLocationInfoQueryParams.pageNum"
                :limit.sync="boatLocationInfoQueryParams.pageSize"
                @pagination="getBoatLocationInfoList"
              />
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="船机工况信息" name="boatMachineWorkingInfoTab">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-refresh"
                size="mini"
                @click="getBoatMachineWorkingInfoList"
              >刷新
              </el-button>
            </el-col>
          </el-row>
          <el-table v-loading="loading" :data="boatMachineWorkingInfoList" @selection-change="handleSelectionChange"
                    max-height="680">
            <!--            <el-table-column type="selection" align="center"/>-->
            <el-table-column label="序号" type="index" align="center" width="48" fixed="left"/>
            <el-table-column label="终端ID" align="center" prop="meterId" fixed="left"/>
            <el-table-column label="船舶机型ID" align="center" prop="machineModelId"
                             :formatter="machineModelIdFormatter"
                             width="90" fixed="left"
            />
            <el-table-column label="转速(rpm)" align="center" prop="speed"/>
            <el-table-column label="扭矩(N·m)" align="center" prop="torque"/>
            <el-table-column label="负荷率(%)" align="center" prop="loadRate"/>
            <el-table-column label="油门开度(%)" align="center" prop="throttleOpening"/>
            <el-table-column label="瞬时油耗(L/h)" align="center" prop="instantFuelConsumption"/>
            <el-table-column label="累计油耗(L)" align="center" prop="accumulateFuelConsumption"/>
            <el-table-column label="发动机运行时间(h)" align="center" prop="engineOperateTime"/>
            <el-table-column label="机油温度(℃)" align="center" prop="engineOilTemp"/>
            <el-table-column label="机油压力(Mpa)" align="center" prop="engineOilPressure"/>
            <el-table-column label="出水温度(℃)" align="center" prop="outWaterTemp"/>
            <el-table-column label="排气温度(℃)" align="center" prop="exhaustGasTemp"/>
            <el-table-column label="进气压力(kPa)" align="center" prop="inGasPressure"/>
            <el-table-column label="进气温度(℃)" align="center" prop="inGasTemp"/>
            <el-table-column label="蓄电池电压(V)" align="center" prop="storageBatteryVoltage"/>
            <el-table-column label="燃油温度(℃)" align="center" prop="fuelOilTemp"/>
            <el-table-column label="燃油精滤后压力(Mpa)" align="center" prop="fuelOilAfterFilteredPressure"/>
            <el-table-column label="燃油精滤前压力(Mpa)" align="center" prop="fuelOilBeforeFilteredPressure"/>
            <el-table-column label="设定轨压(hpa)" align="center" prop="settingTrackPressure"/>
            <el-table-column label="实际轨压(hpa)" align="center" prop="reallyTrackPressure"/>
            <el-table-column label="燃油负压(kPa)" align="center" prop="fuelOilNegativePressure"/>
            <el-table-column label="曲轴箱压力(hpa)" align="center" prop="crankcasePressure"/>
            <el-table-column label="机油滤前压力(Mpa)" align="center" prop="engineOilBeforeFilteredPressure"/>

            <el-table-column label="生成时间" align="center" prop="createTime" width="150" fixed="right">
              <template slot-scope="scope">
                <!--          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>-->
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-button-->
            <!--                  size="mini"-->
            <!--                  type="text"-->
            <!--                  icon="el-icon-edit"-->
            <!--                  @click="handleUpdate(scope.row)"-->
            <!--                  v-hasPermi="['system:info:edit']"-->
            <!--                >修改-->
            <!--                </el-button>-->
            <!--                <el-button-->
            <!--                  size="mini"-->
            <!--                  type="text"-->
            <!--                  icon="el-icon-delete"-->
            <!--                  @click="handleDelete(scope.row)"-->
            <!--                  v-hasPermi="['system:info:remove']"-->
            <!--                >删除-->
            <!--                </el-button>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>

          <pagination
            v-show="boatMachineWorkingInfoTotal>0"
            :total="boatMachineWorkingInfoTotal"
            :page.sync="boatMachineWorkingInfoListQueryParams.pageNum"
            :limit.sync="boatMachineWorkingInfoListQueryParams.pageSize"
            @pagination="getBoatMachineWorkingInfoList"
          />
        </el-tab-pane>
        <el-tab-pane label="发动机故障信息" name="engineMalfunctionInfoTab">
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
import {listBoatStatusInfo} from '@/api/boatStatusInfo'


export default {
  name: 'BoatMachineWorkingInfo',
  data() {
    return {
      meterId: null,
      // activeTab: 'boatMachineWorkingInfoTab',
      activeTab: 'locationInfoTab',
      // 遮罩层
      loading: true,

      // 船机工况信息列表查询参数
      boatMachineWorkingInfoListQueryParams: {
        pageNum: 1,
        pageSize: 30,
        orderByColumn: 'generateTime',
        meterId: 0,
        //要获取的状态信息类型。
        //1：位置信息。
        //2：船机工况信息。
        //3：发动机故障信息。
        //4：报警信息。
        //5：当前驾驶循环统计信息。
        //6：配置心跳信息-J1939。
        //7：锁车相关信息。
        infoType: 2,
      },
      // 船机工况信息列表数据
      boatMachineWorkingInfoList: [],
      // 船机工况信息总条数
      boatMachineWorkingInfoTotal: 0,
      // 船舶位置信息列表查询参数
      boatLocationInfoQueryParams: {
        pageNum: 1,
        pageSize: 30,
        orderByColumn: 'generateTime',
        meterId: 0,
        infoType: 1
      },
      // 船舶位置信息列表数据
      boatLocationInfoList: [],
      // 船舶位置信息总条数
      boatLocationInfoTotal: 0,
      // 船舶当前驾驶循环统计信息列表查询参数
      boatCurrentDrivingCycleStatisticsInfoQueryParams: {
        pageNum: 1,
        pageSize: 30,
        orderByColumn: 'generateTime',
        meterId: 0,
        infoType: 5
      },
      // 船舶当前驾驶循环统计信息列表数据
      boatCurrentDrivingCycleStatisticsInfoList: [],
      // 船舶当前驾驶循环统计信息总条数
      boatCurrentDrivingCycleStatisticsInfoTotal: 0,
      // 显示搜索条件
      showSearch: false
    }
  },
  created() {
  },
  mounted() {
    // let workingInfo = this.$route.params && this.$route.params.workingInfo
    // console.log('mounted workingInfo: ', workingInfo)
    // let meterId = workingInfo && workingInfo.meterId

    let meterId = this.$route.params && this.$route.params.meterId
    console.log('mounted this.$route: ', this.$route)
    console.log('mounted this.$route.meta.title: ', this.$route.meta.title)
    console.log('mounted meterId: ', meterId)

    // this.$route.meta.title = meterId

    if (meterId) {
      this.meterId = meterId;
      this.boatMachineWorkingInfoListQueryParams.meterId = this.meterId
      this.boatLocationInfoQueryParams.meterId = this.meterId
      this.boatCurrentDrivingCycleStatisticsInfoQueryParams.meterId = this.meterId
      this.getBoatMachineWorkingInfoList()
      this.getBoatLocationInfoList()
      this.getBoatCurrentDrivingCycleStatisticsInfoList()
    } else {
      this.$modal.alertWarning('终端ID为空,信息查看失败！')
    }

  },
  methods: {
    /** 查询船舶工况信息列表 */
    getBoatMachineWorkingInfoList() {
      this.loading = true
      listBoatStatusInfo(this.boatMachineWorkingInfoListQueryParams).then(response => {
        this.boatMachineWorkingInfoList = response.rows
        this.boatMachineWorkingInfoTotal = response.total
        this.loading = false
      })
    },
    /** 查询船舶位置信息列表 */
    getBoatLocationInfoList() {
      this.loading = true
      listBoatStatusInfo(this.boatLocationInfoQueryParams).then(response => {
        this.boatLocationInfoList = response.rows
        this.boatLocationInfoTotal = response.total
        this.loading = false
      })
    },
    /** 查询船舶当前驾驶循环统计信息列表 */
    getBoatCurrentDrivingCycleStatisticsInfoList() {
      this.loading = true
      listBoatStatusInfo(this.boatCurrentDrivingCycleStatisticsInfoQueryParams).then(response => {
        this.boatCurrentDrivingCycleStatisticsInfoList = response.rows
        this.boatCurrentDrivingCycleStatisticsInfoTotal = response.total
        this.loading = false
      })
    },
    machineModelIdFormatter(row, column) {
      let machineModelId = row.machineModelId
      let machineModel
      switch (machineModelId) {
        case 1:
          // machineModel = '本埠电控直列柴油机'
          machineModel = '本埠柴油机'
          break
        default:
          machineModel = '未知'
      }

      return machineModel
    },
    locationStatusFormatter(row, column) {
      let locationStatus = row.locationStatus
      return locationStatus === 0 ? '定位' : '不定位'
    },
    longitudeOriFormatter(row, column) {
      let longitudeOri = row.longitudeOri
      return longitudeOri === 0 ? '东经' : '西经'
    },
    latitudeOriFormatter(row, column) {
      let latitudeOri = row.latitudeOri
      return latitudeOri === 0 ? '南纬' : '北纬'
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 10px;
}

.locationInfoTabStyle {
  display: flex;
  flex-direction: column;
}

#mapContainer {
  width: 100%;
  /* 84 = navbar + tags-view = 50 + 34
   * 20 = 上下padding各10px
   */
  min-height: calc(100vh - 84px - 20px);
}

</style>
